 <!-- 性能监控与屏幕自适应 -->
<template>
    <div ref="Cavans"></div>
</template>
<script setup>
import * as THREE from 'three'
import { createHelper, resizeHandler } from '@/utils/threejs'
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { OrbitControls } from 'three/addons/controls/OrbitControls'
import Stats from 'three/examples/jsm/libs/stats.module';

const Cavans = ref(null)
// 创建一个场景
const scene = new THREE.Scene()
// 创建一个相机   PerspectiveCamera 透视投影相机 四个参数 视野角度（FOV）长宽比（aspect ratio）近截面（near） 远截面（far）
const camera = new THREE.PerspectiveCamera( 75, document.body.clientWidth / document.body.clientHeight, 0.1, 1000 )
// 渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true, // 抗锯齿
})
// 创建辅助
createHelper(scene)
// 优化 设置像素比
renderer.setPixelRatio(window.devicePixelRatio || 1)
// 渲染器的尺寸
renderer.setSize(document.body.clientWidth, document.body.clientHeight)
// geometry 几何体 创建一个立方体 BoxGeometry
const geometry = new THREE.BoxGeometry( 1, 1, 1 )
// 添加全局光照 AmbientLight ambientlight( color : Integer, intensity : Float ) 环境光会均匀的照亮场景中的所有物体。
// color - (参数可选）颜色的rgb数值。缺省值为 0xffffff。 十六进制
// intensity - (参数可选)光照的强度。缺省值为 1。
const light = new THREE.AmbientLight(0xffffff, 0.5)
// 添加方向光 平行光（directionallight） 平行光是沿着特定方向发射的光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(light, directionalLight)
// 颜色
const color = new THREE.Color(Math.random(), Math.random(), Math.random())
const faces = []
for(let i = 0; i < geometry.groups.length; i++){
    const material = new THREE.MeshBasicMaterial({
        color: new THREE.Color(Math.random(), Math.random(), Math.random()),
    })
    faces.push(material)
}
// Mesh 网格  网格包含一个几何体 geometry 以及作用在此几何体上的材质 material
const cube = new THREE.Mesh( geometry, faces );
// 调用 scene.add()，物体将会被添加到 (0,0,0) 坐标
scene.add(cube)
// 相机位置
camera.position.z = 5;
const controls = new OrbitControls(camera,renderer.domElement) 
// 将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。 请注意，如果该值被启用，你将必须在你的动画循环里调用update()
controls.enableDamping = true 
// 当.enableDamping设置为true的时候，阻尼惯性有多大。 Default is 0.05. 请注意，要使得这一值生效，你必须在你的动画循环里调用 update()
controls.dampingFactor = 0.03
// 添加性能监控器
const stats = new Stats()
stats.setMode(0)
const clock = new THREE.Clock()
const animate = () => {
    const elapsedTime = clock.getElapsedTime()
    // 浏览器API
	requestAnimationFrame( animate );
    // 相机运动
    camera.position.x = Math.cos(elapsedTime)
    camera.position.y = Math.sin(elapsedTime)
    controls.update() // 更新轨道控制器  
    stats.update() // 更新监控帧数
	renderer.render( scene, camera );
}
animate();
// 自适应
resizeHandler(renderer, camera)
onMounted(()=>{
    // 挂载
    Cavans.value.appendChild(renderer.domElement)
    Cavans.value.appendChild(stats.domElement)
})
</script>
